<template>
  <el-container class="home-container">
    <el-aside :width="asideWidth">
      <side-bar></side-bar>
    </el-aside>
    <el-container class="right-container">
      <el-header>
        <top-bar></top-bar>
      </el-header>
      <el-main>
        <router-view></router-view>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
import SideBar from '@/components/SideBar'
import TopBar from '@/components/TopBar'

export default {
  name: 'Home',
  components: {
    SideBar,
    TopBar
  },
  computed: {
    asideWidth() {
        return this.$store.state.isCollapse ? '70px' : '200px';
    }
  }
}
</script>

<style scoped>
.home-container {
  margin: 0;
}

.el-aside {
  min-height: 100vh;
  background-color: #334157;
  box-shadow: 0px 0px 10px rgba(0,0,0,0.5);
  transition: all 0.5s;
}

.el-header {
  padding: 0;
}

.el-main {
  background-color: #FFF;
  margin: 10px 0 10px 10px;
  box-shadow: 0 0 10px #CCCCCC25;
}
</style>
